<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>

  <div class="Back">
    <a class="BackLink" th:if="${category}!=null" th:href="@{/categoryForm(categoryId=${category.categoryId})}">
      <i class="fa-solid fa-circle-left"></i>
      Return to
      <span th:text="${category.name}"></span>
    </a>

    <a class="BackLink" th:if="${category}==null" th:href="mainForm">
      <i class="fa-solid fa-circle-left"></i>
      Return to Main Menu
    </a>
  </div>

  <div style="display: inline-block" class="Catalog">
    <h2 th:if="${product}!=null" th:text="${product.name}"></h2>
    <h2 th:if="${product}==null"></h2>

    <div class="ProductMain">
      <div th:if="!${itemList.isEmpty()}">
        <div class="Product" th:each="item:${itemList}">
          <div class="ProductImg">
            <a th:href="@{/itemForm(itemId=${item.itemId})}">
              <img th:src="${item.product.description.substring(14, item.product.description.indexOf('>')-1)}"
                   class="CategoryImgLink">
            </a>
          </div>
          <div class="ProductDescription">
            <b>
              <a th:href="@{/itemForm(itemId=${item.itemId})}" class="ProductDescriptionLink">
                <span th:text="${item.attribute1}"></span>
                <span th:text="${item.attribute2}"></span>
                <span th:text="${item.attribute3}"></span>
                <span th:text="${item.attribute4}"></span>
                <span th:text="${item.attribute5}"></span>
                <span th:text="${item.product.name}"></span>
              </a>
            </b>
          </div>
          <div class="ProductPrice">
            <b>
              <a th:href="@{/itemForm(itemId=${item.itemId})}" class="ProductPriceLink">
                <fmt:formatNumber th:text="'$'+${item.listPrice}" pattern="$#,##0.00"/>
              </a>
            </b>
          </div>
          <div class="Button">
            <a th:href="@{/addItemToCart(workingItemId=${item.itemId})}" class="ButtonLink">
              <i class="fa-solid fa-cart-shopping"></i>Add to Cart
            </a>
          </div>
        </div>
      </div>
    </div>
    <h2 th:if="${itemList.isEmpty()}">Sorry for that nothing was found here...</h2>

  </div>

  <div th:replace="common/bottom"></div>
</body>
</html>